<template>
  <div class="header-top">
    <div class="header-top-div">
      <img class="header-image" :src="circleUrl" />
      <el-dropdown click="header-out">
        <span class="el-dropdown-link">
          {{ user }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <i class="el-icon-setting"></i>
            <el-button type="text" class="btn-out" @click="getSystem()"
              >设置</el-button
            >
          </el-dropdown-item>
          <el-dropdown-item>
            <i class="el-icon-switch-button"></i>
            <el-button type="text" class="btn-out" @click="getOut()"
              >退出</el-button
            >
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: "读取中...",
      circleUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      this.user = window.sessionStorage.getItem("name");
      this.circleUrl = window.sessionStorage.getItem("image");
    },
    getOut() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    getSystem() {
      this.$router.push("/system");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.header-top {
  display: flex;
  justify-content: flex-end;
}
.header-top-div {
  display: flex;
}
.out-btn {
  color: #303133;
}
.header-image {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
  top: 8px;
  right: 10px;
  border: 2px solid #e7e8e9;
  border-radius: 50%;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.btn-out {
  color: #313331;
}
.el-menu.el-menu--horizontal {
  border: none;
  background-color: transparent;
}
.el-dropdown-link:hover {
  cursor: pointer;
  opacity: 0.8;
}
.btn-platform {
  color: blueviolet;
  margin-left: 20px;
}
.el-dropdown-menu {
  padding: 0;
}
</style>
